<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN">   
  <HTML>   
  <HEAD>   
  <TITLE>   emu's   div-drag   </TITLE>   
  <META   NAME="Author"   CONTENT="emu">   
  <SCRIPT   LANGUAGE="JavaScript">   
  <!--   
  var   activeDiv,activeSpan,beforeDiv;   
  function   active(e){   
  if(e.tagName=="SPAN"){   
  if(!activeDiv)   return;   
  activeSpan   =   e;   
  if(activeDiv.srcElement.parentNode!=e)   
  before(e.lastChild);   
  return;   
  }   
  activeDiv   =   e.cloneNode(true);   
  document.body.insertBefore(activeDiv);   
  with(activeDiv.style){   
  position="absolute";   
  backgroundColor="yellow";   
  filter="alpha(opacity=50)";   
  left=event.x-20;   
  top=event.y+2;   
  }   
  activeDiv.srcElement=e;   
  activeDiv.onmousedown=null;   
  activeDiv.onmousemove=null;   
  }   
  function   releaseDiv(){   
  if(!activeDiv)   return;   
  document.body.removeChild(activeDiv)   
  var   se   =   activeDiv.srcElement;   
  var   p   =   se.parentNode;   
  activeDiv=null;   
  }   
  function   moveDiv(){   
  if(!activeDiv)   return;   
  with(activeDiv.style){   
  left=event.x-20;   
  top=event.y+2;   
  }   
  }   
  function   before(e){   
  if(!activeDiv   ||   e.nextSibling==activeDiv)return;   
  if(e!=activeDiv.srcElement)   
  if(e.nextSibling&&e.nextSibling.parentNode==e.parentNode&&e.nextSibling!=e.parentNode.lastChild)   
  e.parentNode.insertBefore(activeDiv.srcElement.parentNode.removeChild(activeDiv.srcElement),e.nextSibling)   
  else   
  e.parentNode.insertBefore(activeDiv.srcElement.parentNode.removeChild(activeDiv.srcElement))   
  }   
  var   aaa=new   Array(21);   
  //-->   
  </SCRIPT>   
  </HEAD>   
    
  <BODY   onmouseup="releaseDiv()"   onmousemove="moveDiv()"   onselectstart="return   false">   
  <span   style="width:30%;height:100%;border:1px   solid   gray;overflow-y:auto"   onmousemove="active(this)">   
  <SCRIPT>//自动生成假数据   
  for(var   i=0;i<10;i++)   document.write(" <div   style=\"cursor:hand;border:1px   solid   #CCFFFF;background-color:#99FFFF\"   onmousedown=\"active(this)\"   onmousemove=\"before(this)\"><span   style=\"width:100\">"+aaa.join(i)+"</span></div>")   
  </SCRIPT>   
  </span>   
  <span   style="width:30%;height:100%;border:1px   solid   gray;overflow-y:auto"   onmousemove="active(this)">   
  <SCRIPT>//自动生成假数据   
  for(var   i=97;i<123;i++)   document.write(" <div   style=\"cursor:hand;border:1px   solid   #CCFFFF;background-color:#FFFFCC\"   onmousedown=\"active(this)\"   onmousemove=\"before(this)\"><span   style=\"width:100\">"+aaa.join(String.fromCharCode(i))+"</span></div>")   
  </SCRIPT>   
  </span>   
  <span   style="width:30%;height:100%;border:1px   solid   gray;overflow-y:auto"   onmousemove="active(this)">   
  <SCRIPT>//自动生成假数据   
  for(var   i=65;i<91;i++)   document.write(" <div   style=\"cursor:hand;border:1px   solid   #CCFFFF;background-color:#FFCCFF\"   onmousedown=\"active(this)\"   onmousemove=\"before(this)\"><span   style=\"width:100\">"+aaa.join(String.fromCharCode(i))+"</span></div>")   
  </SCRIPT>   
  </span>   
    
  </BODY>   
  </HTML>   
